<template>
  <div class="singer" ref="singer">
    <list-view @select="selectSinger" :singerData=singers ref="list" />
    <router-view></router-view>
  </div>
</template>

<script>
import { getAllArtists } from '@/api/index'
import ListView from '../../base/list-view/ListView'
import { mapMutations } from 'vuex'
import { playlistMixin } from '../../assets/js/mixin'

export default {
  name: 'Singer',
  mixins: [playlistMixin],
  components: {
    ListView
  },
  data() {
    return {
      singers: []
    }
  },
  methods: {
    ...mapMutations({
      setSinger: 'SET_SINGER'// 将 `this.setSinger()` 映射为 `this.$store.commit('setSinger')`
    }),
    handlePlaylist(playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.singer.style.bottom = bottom
      this.$refs.list.refresh()
    },
    selectSinger(singer) {
      this.$router.push({
        path: `/singer/${singer.id}`
      })
      this.setSinger(singer)
    },
    _getAllArtists() {
      getAllArtists().then(res => {
        this.singers = res
      }).catch(err => {
        console.log(err)
      })
    }
  },
  created() {
    this._getAllArtists()
  }
}
</script>

<style lang="scss" scoped>
.singer{
  position: fixed;
  top: 88px;
  bottom: 0;
  width: 100%;
}
</style>